<template>
  <div class="box" style="height:100%;">
  
    <view-box>
  
      <sticky scroll-box="vux_view_box_body" :offset="46">
  
        <x-header :left-options="{showBack:false}" title="save money"></x-header>
  
      </sticky>
  
    <transition :name="'vux-pop-' + (showSaved? 'in' : 'out')">
          <router-view :list="savingList" :saved="saved" :saving="saving"  class="router-view" ></router-view>
    </transition>

      <tabbar style="position:fixed">
  
        <tabbar-item  @click.native="jump(1)">
          <img slot="icon" src="../assets/saved.png">
          <span slot="label">已存</span>
        </tabbar-item>
  
        <tabbar-item @click.native="jump(2)">
          <img slot="icon" src="../assets/savnig.png">
          <span slot="label">待存</span> 
        </tabbar-item>
        
        <tabbar-item @click.native="jump(3)">
          <img slot="icon" src="../assets/savnig.png">
          <span slot="label">概览</span>
        </tabbar-item>
  
      </tabbar>
  
    </view-box>
  
  
  
  </div>
</template>
<script>
import {
  XHeader,
  Grid,
  Group,
  XInput,
  XButton,
  GridItem,
  GroupTitle,
  XTable,
  LoadMore,
  Tabbar,
  TabbarItem,
  ViewBox,
  Sticky
} from "vux";

export default {
  components: {
    XHeader,
    Grid,
    Group,
    XInput,
    XButton,
    GridItem,
    GroupTitle,
    XTable,
    LoadMore,
    Tabbar,
    TabbarItem,
    ViewBox,
    Sticky
  },

  computed: {
    savingList: function() {
      if (this.showSaved) return this.saved;

      return this.saving;
    }
  },

  data() {
    return {
      saved: [],
      saving: [],
      money: 0,
      showSaved: true
    };
  },

  mounted() {
    this.getSaved();

    if (this.saved) {
      this.init();
    }
    if (location.href.indexOf("saving") != -1) {
      this.showSaved = false;
      this.$router.push({
        path: "/saving"
      });
    } else {
      this.showSaved = true;
      this.$router.push({
        path: "/"
      });
    }
  },

  methods: {
    getSaved: function() {
      var data = localStorage.getItem("money");
      this.saved = eval(data) || [];
      return this.saved;
    },

    save: function() {
      if (!Number(this.money) > 0 || this.money > 365) {
        this.$vux.alert.show({
          title: "警告",

          content: "输入大于0小于365的整数"
        });

        return;
      }

      var date = new Date().toLocaleDateString();

      var data = {
        money: this.money,

        date: date
      };

      var saved = this.getSaved();

      if (!saved) saved = [];

      //去除重复

      if (!this.exist(saved, this.money)) {
        saved.push(data);

        localStorage.setItem("money", JSON.stringify(saved));

        this.saved = saved;

        this.saving.remove(this.money);
      } else {
        this.$vux.alert.show({
          title: "温馨提示",

          content: this.money + "已经存过啦"
        });
      }
      this.getRemain();
    },

    getRemain: function() {
      var saved = this.getSaved() || [];

      var saving = [];

      for (var i = 1; i <= 365; i++) {
        var exist = false;

        for (var j = 0; j < saved.length; j++) {
          if (saved[j].money == i) {
            exist = true;

            break;
          }
        }
        if (!exist) {
          saving.push(i);
        }
      }
      this.saving = saving;
    },

    init: function() {
      var data = this.getSaved();
      //存在数据
      if (data) {
        this.getRemain();
      } else {
        localStorage.setItem("money", []);
      }
    },

    exist: function(arr, val) {
      for (var i = 0; i < arr.length; i++) {
        if (val == arr[i].money) {
          return true;
        }
      }

      return false;
    },
    jump(arg) {
      if (arg === 1) {
        this.showSaved = true;
        this.$router.push({
          path: "/"
        });
      } else if(arg===2){
        this.showSaved = false;
        this.$router.push({
          path: "/saving"
        });
      }else{
        this.$router.push({
          name:'statistics'
        })
      }
    }
  }
};
</script>
<style scoped>
.box {
}
.table {
  overflow-y: scroll;
}
.center {
  text-align: center;
  margin: 0 auto;
}

.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform;
  transition: all 250ms;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  perspective: 1000;
}

.vux-pop-out-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}

.vux-pop-out-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.vux-pop-in-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}

.vux-pop-in-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
